<!-- 工具信息页面 -->
<template>
  <div class="tool-list-page">
    <!-- 添加隐藏的文件输入框 -->
    <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;" accept=".xlsx,.xls,.csv"
      multiple />

    <div class="search-bar">
      <el-input v-model="searchQuery" placeholder="请输入工具名称" class="search-input" @input="handleSearchInput"></el-input>
      <el-select v-model="selectedToolType" placeholder="请选择工具类型" class="tool-type-select">
        <el-option v-for="type in toolTypes" :key="type.value" :label="type.label" :value="type.value" />
      </el-select>
      <el-button type="primary" @click="fetchToolListEvent" class="search-button">搜索</el-button>
      <el-button type="primary" class="search-button" v-if="isAdmin" @click="downloadSelectedFiles">下载文件</el-button>
      <el-button class="search-button" v-if="isAdmin" @click="openFileUpload">批量上传</el-button>
    </div>
    <el-table :data="paginatedData" border style="width: 100%" class="center-table"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="name" label="载荷名称" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
            <span class="ellipsis-cell">{{ scope.row.name }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ltName" label="载荷类型" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.ltName" placement="top">
            <span class="ellipsis-cell">{{ scope.row.ltName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="载荷简介" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.desc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.desc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="载荷版本" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.version" placement="top">
            <span class="ellipsis-cell">{{ scope.row.version }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="useDesc" label="载荷说明" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.useDesc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.useDesc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="useDesc" label="组件信息及版本" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.componentInfoVersion" placement="top">
            <span class="ellipsis-cell">{{ scope.row.componentInfoVersion }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="useDesc" label="设备版本" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.deviceVersion" placement="top">
            <span class="ellipsis-cell">{{ scope.row.deviceVersion }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="useDesc" label="更新用户" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.updateUser" placement="top">
            <span class="ellipsis-cell">{{ scope.row.updateUser }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="operSystem" label="操作系统" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.operSystem" placement="top">
            <span class="ellipsis-cell">{{ scope.row.operSystem }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="installDesc" label="安装说明" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.installDesc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.installDesc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template #default="scope">

          <el-button size="mini" @click="viewDetails(scope.row)">详情</el-button>
          <el-button v-if="isAdmin" v-permission="'delete_info'" size="mini" type="danger"
            @click="deleteRow(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <toolitem ref="toolItemDialog" @submit="handleUpdate"></toolitem>

    <!-- 详情弹出层 -->
    <el-dialog :visible.sync="detailsVisible" title="详情信息" width="1000px">
      <el-form :model="dialogFormData" label-width="120px" :disabled="!isEditing">
        <!-- 表单项 -->
        <el-form-item label="载荷名称">
          <el-input v-model="dialogFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="载荷类型">
          <el-input v-model="dialogFormData.ltName"></el-input>
        </el-form-item>
        <el-form-item label="载荷简介">
          <el-input v-model="dialogFormData.desc" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="载荷版本">
          <el-input v-model="dialogFormData.version"></el-input>
        </el-form-item>
        <el-form-item label="载荷说明">
          <el-input v-model="dialogFormData.useDesc" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="操作系统">
          <el-input v-model="dialogFormData.operSystem"></el-input>
        </el-form-item>
        <el-form-item label="安装说明">
          <el-input v-model="dialogFormData.installDesc" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="服务名称">
          <el-input v-model="dialogFormData.serviceName" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="dialogFormData.remark" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="截图">
          <template>
            <el-image v-if="dialogFormData.pic" :src="dialogFormData.pic" :preview-src-list="[dialogFormData.pic]" 
              style="width: 100px; height: 100px; cursor: pointer"
              />
          </template>
        </el-form-item>
      </el-form>
      <!-- 图片预览弹出层 -->
      <el-dialog :visible.sync="imageDialogVisible" width="1200px" class="image-preview-dialog">
        <img :src="previewImageUrl" alt="预览图片" style="width: 100%" />
      </el-dialog>
      <div style="margin-bottom: 20px" class="search-bar">
        <el-button v-if="isAdmin" type="primary" class="button" @click="openAddDimensionDialog">
          添加漏洞
        </el-button>
        <template>
          <div v-if="dialogFormData.filePath">
            <el-button  v-if="isAdmin" type="primary" size="mini" @click="downloadFile(dialogFormData)">
              下载文件
            </el-button>
          </div>
          <p v-else>没有上传文件</p>
        </template>
      </div>
      <!-- 子维度列表 -->
      <dimension ref="dimension" :tool-id="currentToolId || ''" @add-dimension="submitAddDimension"
        :general-id="generalId" />
      <span slot="footer" class="dialog-footer">
        <template v-if="!isEditing">
          <el-button v-if="isAdmin" size="mini" type="primary" @click="toggleEditing">
            编辑
          </el-button>
          <el-button @click="closeDetails">关闭</el-button>
        </template>
        <template v-else>
          <el-button type="primary" size="mini" @click="saveChanges" :loading="isSaving">保存</el-button>
          <el-button @click="cancelEditing">取消</el-button>
        </template>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="pageSize" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>

    <el-dialog :visible.sync="addDimensionDialogVisible" title="添加漏洞信息" width="700px">
      <el-form :model="addDimensionForm" label-width="100px" ref="addDimensionFormRef">
        <el-form-item label="漏洞名称" prop="name">
          <el-input v-model="addDimensionForm.name" placeholder="请输入漏洞名称"></el-input>
        </el-form-item>
        <el-form-item label="漏洞时间" prop="holeTime">
          <el-date-picker v-model="addDimensionForm.holeTime" type="datetime" placeholder="选择漏洞时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="漏洞类型" prop="type">
          <el-input v-model="addDimensionForm.type" placeholder="请输入漏洞类型" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="漏洞效果" prop="effect">
          <el-input v-model="addDimensionForm.effect" placeholder="请输入漏洞效果" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="漏洞描述" prop="desc">
          <el-input v-model="addDimensionForm.desc" placeholder="请输入漏洞描述" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="适用版本" prop="applicableVersion">
          <el-input v-model="addDimensionForm.applicableVersion" placeholder="请输入适用版本"></el-input>
        </el-form-item>
        <el-form-item label="使用条件" prop="condition">
          <el-input v-model="addDimensionForm.condition" placeholder="请输入使用条件" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="是否公开" prop="publicly">
          <el-select v-model="addDimensionForm.publicly" placeholder="请选择是否公开">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否修复" prop="repaired">
          <el-select v-model="addDimensionForm.repaired" placeholder="请选择是否修复">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="漏洞评分" prop="score">
          <el-input v-model="addDimensionForm.score" placeholder="请输入漏洞评分"></el-input>
        </el-form-item>
        <!-- 将按钮放入 el-form-item 并显示在表单底部 -->
        <el-form-item>
          <el-button @click="addDimensionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddDimension">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let lastDownloadTime = 0; // 在组件外部定义，保持全局唯一
import dimension from "./dimension.vue";
import dimensionitem from "./dimensionitem.vue";
import axios from "@/unil/index"; // 确保正确导入 axios

import {
  getToolList,
  updateTool,
  deleteTool,
  conditionTool,
  exportExcelTool,
  // 移除exportuploadExcelTool导入
} from "@/api/tool/tool.js"; // 引入接口方法
import toolitem from "@/components/toolitem.vue"; // 引入工具信息编辑组件
import { mapGetters } from "vuex";
import EventBus from "@/eventBus.js"; // 确保正确引入 EventBus
export default {
  components: { toolitem, dimension, dimensionitem },
  data() {
    return {
      searchQuery: "",
      selectedToolType: "", // 选中的工具类型
      toolTypes: [
        { label: "所有类型", value: "" },
        { label: "扫描探测", value: "扫描探测" },
        { label: "远程漏洞利用", value: "远程漏洞利用" },
        { label: "远程控制", value: "远程控制" },
        { label: "本地提权", value: "本地提权" },
        { label: "数据隐蔽回传", value: "数据隐蔽回传" },
        { label: "消痕", value: "消痕" },
        { label: "内网渗透", value: "内网渗透" },
        { label: "拒绝服务", value: "拒绝服务" },
        { label: "爬虫", value: "爬虫" },
        { label: "密码爆破", value: "密码爆破" },
        { label: "webshell", value: "webshell" },
        { label: "SQL注入", value: "SQL注入" },
      ],
      toolList: [], // 工具列表数据
      dialogFormData: {}, // 当前工具详情数据
      detailsVisible: false, // 控制详情弹出层显示
      total: 0, // 总条数
      pageSize: 10, // 默认每页显示 10 条数据
      currentPage: 1, // 当前页码
      dimensionMap: {}, // 存储每个工具的子维度列表
      currentToolId: null, // 当前工具的 ID
      subDimensionId: null, // 当前子维度 ID
      imageDialogVisible: false, // 控制图片预览弹出层显示
      previewImageUrl: "", // 当前预览的图片 URL
      addDimensionDialogVisible: false, // 控制添加子维度弹出层显示
      addDimensionForm: {
        name: "",
        holeTime: "",
        type: "",
        effect: "",
        desc: "",
        applicableVersion: "",
        condition: "",
        publicly: "",
        repaired: "",
        score: "",
      }, // 添加子维度表单数据
      generalId: null,
      isEditing: false, // 控制是否处于编辑状态
      originalFormData: {}, // 存储原始数据，用于取消编辑时恢复
      selectedRows: [], // 存储选中的行数据
      isSaving: false, // 保存按钮加载状态
      uploadFiles: [], // 存储要上传的文件
      isUploading: false, // 上传状态
    };
  },
  mounted() {
    this.fetchToolList(); // 组件挂载后获取工具列表

    // 调试isAdmin状态
    console.log(
      "工具列表组件挂载，isAdmin:",
      this.$store.getters["permissions/isAdmin"],
      "isManager:",
      this.$store.state.permissions.isManager
    );
  },
  computed: {
    ...mapGetters("permissions", ["getUsername", "isAdmin"]),
    // 删除旧的isAdmin，使用Vuex中的isAdmin getter

    paginatedData() {
      // 根据当前页和每页条数计算显示的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.toolList.slice(start, end);
    },
  },
  methods: {
    handleSelectionChange(selectedRows) {
      console.log("选中的行:", selectedRows.map(row => row.id));
      this.selectedRows = selectedRows; // 保存选中的行数据
    },
    openEditDialog(row) {
      this.$refs.toolItemDialog.open(row); // 调用子组件的 open 方法并传递数据
    },

    async handleUpdate(updatedData) {
      console.log("接收到的更新数据:", updatedData);
      try {
        const response = await updateTool(updatedData); // 调用更新接口
        console.log("更新响应:", response);
        this.$message.success("工具信息更新成功");
        this.fetchToolList(); // 刷新工具列表
      } catch (error) {
        console.error("更新工具信息失败:", error);
        this.$message.error("工具信息更新失败，请稍后再试");
      }
    },
    openAddDimensionDialog() {
      if (!this.isAdmin) {
        this.$message.error("您没有权限添加漏洞");
        return;
      }
      this.addDimensionDialogVisible = true; // 打开添加子维度弹出层
    },
    async submitAddDimension() {
      console.log("添加子维度数据:", this.addDimensionForm);
      this.$refs.dimension.receiveAddDimensionForm(this.addDimensionForm); // 调用子组件方法
      this.addDimensionDialogVisible = false; // 关闭弹出层
    },
    async fetchToolList() {
      try {
        const response = await getToolList();
        this.toolList = response.data; // 假设接口返回的数据在 data 属性中
        this.total = this.toolList.length; // 设置总条数

        console.log("工具列表:", this.toolList);
      } catch (error) {
        console.error("获取工具列表失败:", error);
      }
    },
    viewDetails(row) {
      this.dialogFormData = { ...row }; // 设置表单数据为当前行数据
      this.detailsVisible = true; // 打开详情弹出层
      this.isEditing = false; // 重置编辑状态
      console.log("查看详情:", row);

      // 设置当前工具的 ID
      this.currentToolId = row.subDimensionId || ""; // 确保 currentToolId 不为 null
      this.generalId = row.id; // 设置 generalId
      console.log("当前工具类 subDimensionId ID:", this.currentToolId);

      // this.subDimensionId = row.subDimensionId; // 设置当前子维度 ID
    },
    closeDetails() {
      this.detailsVisible = false; // 关闭详情弹出层
      this.imageDialogVisible = false; // 关闭图片预览弹出层
      this.isEditing = false; // 重置编辑状态
    },
    async deleteRow(subDimensionId) {
      try {
        await this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        const response = await deleteTool(subDimensionId); // 调用删除接口
        console.log("删除响应:", response);
        this.$message.success("删除成功"); // 提示删除成功
        this.fetchToolList(); // 更新工具列表
      } catch (error) {
        console.error("删除失败:", error);
        this.$message.error("删除失败，请稍后再试");
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize; // 更新每页显示条数
      this.currentPage = 1; // 重置为第一页
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage; // 更新当前页码
    },

    downloadSelectedFiles() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要下载的文件！');
        return;
      }

      // 获取所有选中行的id
      const ids = this.selectedRows
        .map(row => row.id)
        .filter(id => id);

      console.log("下载按钮被点击，选中的ID数组:", ids);

      if (ids.length === 0) {
        this.$message.warning('选中的项目中没有有效ID！');
        return;
      }
      exportExcelTool(ids).then((response) => {
        const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
        const url = window.URL.createObjectURL(blob);

        // 创建临时链接下载
        const link = document.createElement('a');
        link.href = url;
        link.download = '工具数据.xlsx';
        document.body.appendChild(link);
        link.click();

        // 清理
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);

        this.$message.success('文件下载成功');
      }).catch((error) => {
        console.error("下载 Excel 文件失败:", error);
        this.$message.error('文件下载失败，请稍后重试');
      });
    },
    downloadFile(row) {
      // 在下载前发送name到operate页面
      if (row && row.name) {
        this.$store.commit("setReceivedName", row.name);
      }
      this.downloadSingleFile(row, (success) => {
        if (success) {
          this.$message.success('文件下载成功');
        } else {
          this.$message.error('文件下载失败');
        }
      });
    },
    downloadSingleFile(row, callback) {
      const name = row.name;
      const now = Date.now();
      console.log("发送工具名称123:", name);
      if (now - lastDownloadTime < 3000) {  // 3秒内重复点击忽略
        console.log("防抖：忽略重复下载请求");
        return;
      }
      lastDownloadTime = now;
      const filePath = row.filePath;
      if (!filePath || typeof filePath !== "string") {
        console.error("filePath 非法:", filePath);
        return;
      }

      const baseURL = "http://192.168.124.9:8888";
      const isHttpUrl = filePath.startsWith("http");
      const isLocalPath = filePath.startsWith("C:\\");

      if (isLocalPath) {
        console.error("filePath 是本地路径，前端无法直接下载:", filePath);
        return;
      }

      const fullPath = isHttpUrl ? filePath : `${baseURL}${filePath}`;
      const filename = filePath.split("/").pop();

      axios({
        url: fullPath,
        method: "GET",
        responseType: "blob",
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.download = filename;
          link.click();
          URL.revokeObjectURL(link.href);
        })
        .catch((err) => {
          console.error("下载失败:", err);
          this.$message.error(`文件 ${filename} 下载失败`);
        });
    },
    /**
     * 监听搜索框输入事件
     */
    handleSearchInput(value) {
      // 当搜索框清空时，自动显示全部数据
      if (!value && value !== 0) {
        this.selectedToolType = ""; // 同时重置筛选类型
        this.fetchToolList();
      }
    },


    async fetchToolListEvent() {
      console.log("发送工具名称和类型:", this.searchQuery, this.selectedToolType);
      const name = this.searchQuery; // 工具名称
      const ltName = this.selectedToolType; // 工具类型

      // 如果搜索条件都为空，直接获取全部数据
      if (!name && !ltName) {
        return this.fetchToolList();
      }

      try {
        const response = await conditionTool(name, ltName); // 调用条件查询接口
        console.log("条件查询响应:", response);

        if (response && response.data) {
          this.toolList = response.data; // 更新工具列表
          this.total = this.toolList.length; // 更新总条数
          this.currentPage = 1; // 重置页码到第一页

          if (this.toolList.length === 0) {
            this.$message.info('未找到符合条件的工具');
          } else {
            this.$message.success('搜索结果已更新');
          }
        } else {
          this.toolList = [];
          this.total = 0;
          this.$message.warning('搜索结果为空');
        }
      } catch (error) {
        console.error("获取工具列表失败:", error);
        this.$message.error("搜索失败，请稍后再试");
      }
    },

    // 不再使用该方法，但保留它以备将来可能需要
    downloadExcel(ids) {
      // ...existing code...
    },

    toggleEditing() {
      this.isEditing = true;
      // 深拷贝保存原始数据，用于取消时恢复
      this.originalFormData = JSON.parse(JSON.stringify(this.dialogFormData));

      this.$message.info('已进入编辑模式');

      this.$nextTick(() => {
        // 尝试找到第一个输入框并聚焦
        const firstInput = document.querySelector('.el-dialog__body .el-input__inner:not([disabled])');
        if (firstInput) {
          firstInput.focus();
        }
      });
    },

    cancelEditing() {
      this.$confirm('确定要取消编辑吗？未保存的修改将丢失', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '继续编辑',
        type: 'warning'
      }).then(() => {
        // 恢复原始数据
        this.dialogFormData = JSON.parse(JSON.stringify(this.originalFormData));
        this.isEditing = false;
        this.$message.info('已取消编辑');
      }).catch(() => {
        // 继续编辑，不做操作
      });
    },

    async saveChanges() {
      this.isSaving = true;

      try {
        // 保存编辑后的数据
        const updatedData = { ...this.dialogFormData };
        await this.handleUpdate(updatedData);
        this.isEditing = false;

        // 延迟关闭以允许成功消息显示
        setTimeout(() => {
          this.closeDetails();
        }, 1000);
      } catch (error) {
        console.error('保存失败:', error);
      } finally {
        this.isSaving = false;
      }
    },

    /**
     * 打开文件选择对话框
     */
    openFileUpload() {
      // 触发隐藏的文件输入框点击事件
      this.$refs.fileInput.click();
    },

    /**
     * 处理文件选择变化
     */
    handleFileChange(event) {
      const files = event.target.files;
      if (!files || files.length === 0) return;

      this.uploadFiles = Array.from(files);
      this.uploadSelectedFiles();

      // 重置文件输入以允许重复选择相同的文件
      event.target.value = '';
    },

    uploadSelectedFiles() {
      if (this.uploadFiles.length === 0) {
        this.$message.warning('请先选择要上传的文件！');
        return;
      }

      this.isUploading = true;
      this.$message.info('正在上传文件，请稍候...');

      // 创建FormData对象
      const formData = new FormData();

      // 修改参数名为'file'而不是'files'，服务器可能期望这个名称
      // 如果有多个文件，添加到同一个key下
      this.uploadFiles.forEach(file => {
        formData.append('file', file); // 修改为单数形式'file'
      });

      // 输出FormData内容用于调试
      console.log('上传的文件:', this.uploadFiles.map(f => f.name));

      // 直接使用axios发送请求
      const baseURL = "http://192.168.124.9:8888";
      const url = `${baseURL}/tool/general/uploadExcel`;

      axios({
        url: url,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: formData,
        timeout: 60000, // 增加超时时间到60秒
      })
        .then(response => {
          console.log('文件上传成功:', response);
          this.$message.success('文件上传成功');
          this.fetchToolList(); // 刷新列表以显示新上传的数据
        })
        .catch(error => {
          console.error('文件上传失败:', error);
        })
        .finally(() => {
          this.isUploading = false;
          this.uploadFiles = [];
        });
    },
  }
};
</script>

<style scoped>
.tool-list-page {
  min-height: 100vh;
  background: #232323;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 0 0;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
  width: 90%;
  max-width: 1200px;
}

.search-input {
  flex: 1;
  max-width: 300px;
  background-color: #131313 !important;
}

.tool-type-select {
  width: 200px;
}

.search-button {
  background-color: #409eff;
  color: #fff;
  border-radius: 4px;
  transition: background-color 0.3s;
  border: none;
  min-width: 90px;
}

.search-button:hover {
  background-color: #66b1ff;
}

.center-table {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  background: #262626;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.center-table .el-table__cell {
  text-align: center;
  background-color: #262626;
  color: #fff;
}

.ellipsis-cell {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}

.pagination {
  margin: 24px auto 0 auto;
  text-align: right;
  width: 90%;
  max-width: 1200px;
}

.button {
  border: 1px solid #409eff !important;
  margin-top: 0;
  background: #232323;
  color: #fff;
  border-radius: 4px;
}

.button:hover {
  background: #409eff;
  color: #fff;
}

.image-preview-dialog {
  text-align: center;
}

::v-deep .el-dialog__wrapper .el-dialog {
  background: #262626 !important;
  color: #fff !important;
  border-radius: 12px;
}

::v-deep .el-dialog__header,
::v-deep .el-dialog__body,
::v-deep .el-dialog__footer {
  background: #262626 !important;
  color: #fff !important;
}

::v-deep .el-dialog__header .el-dialog__title {
  color: #fff !important;
}

::v-deep .el-dialog__body .el-form .el-form-item .el-form-item__label {
  color: #fff !important;
}

::v-deep .el-input .el-input__inner,
::v-deep .el-textarea__inner {
  background-color: #232323 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 4px;
}

::v-deep .el-input__inner::placeholder,
::v-deep .el-textarea__inner::placeholder {
  color: #bbb !important;
  opacity: 1;
}

::v-deep .el-select-dropdown,
::v-deep .el-select-dropdown__item {
  background-color: #232323 !important;
  color: #fff !important;
}

::v-deep .el-select-dropdown__item.selected {
  background-color: #222 !important;
  color: #ffd04b !important;
}

::v-deep .el-table::before {
  background-color: transparent !important;
}

::v-deep .el-table__body-wrapper {
  overflow-x: hidden !important;
}

::v-deep .el-table td,
::v-deep .el-table th {
  border-right: none !important;
}

::v-deep .el-pagination {
  border-bottom: none !important;
  background: transparent !important;
}

::v-deep .el-message-box__header,
::v-deep .el-message-box__container,
::v-deep .el-message-box__content,
::v-deep .el-message-box__btns {
  background-color: #2e2e2e !important;
  color: #fff !important;
}

/* 编辑模式样式 */
::v-deep .el-form.is-editing .el-input__inner {
  border-color: #409eff !important;
  background-color: #263445 !important;
}

/* 编辑按钮突出显示 */
.el-button--primary.edit-button {
  background-color: #67c23a;
  border-color: #67c23a;
}

/* 保存按钮加载中样式 */
.el-button.is-loading {
  pointer-events: none;
}
</style>
